<template>
    <div class="edu" id="edu">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="90px">
            <!--      <el-form-item label="授信时间" prop="createdTime">

        <el-date-picker clearable size="small" style="width: 200px"

          v-model="queryParams.createdTime"

          type="date"

          value-format="yyyy-MM-dd"

          placeholder="选择授信时间">

        </el-date-picker>

      </el-form-item> -->

            <el-form-item label="公司名称" prop="componyName">
                <el-input v-model="queryParams.companyName" placeholder="请输入公司名称" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>

            <el-form-item label="授信额度" prop="sfee" style="width:450px">
                <el-input style="float: left;width: 140px;" size="small" v-model="queryParams.sfee" placeholder="从" clearable @keyup.enter.native="handleQuery" />
                <span style="float: left;margin: 0 20px;">
                    到
                </span>
                <el-input style="float: left;width: 140px" v-model="queryParams.endSfee" placeholder="元" clearable size="small " @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="授信时间" prop="creditTime" size="small" style="height:36px">
                <el-date-picker type="daterange" v-model="creditTime" format="yyyy-MM-dd" size="small" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" @change="handleChangeTime" range-separator="至" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="审核状态 " prop="status">
                <el-select v-model="queryParams.status" placeholder="请选择审核状态 " clearable size="small">
                    <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                </el-select>
            </el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form>
        <el-row :gutter="10" class="mb8" style="margin-top: 10px;">
            <el-col :span="1.5">
                <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['biz:edu:export']">导出</el-button>
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="eduList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="编号" align="center" prop="id" />
            <el-table-column label="公司名称" align="center" prop="companyName" />
            <el-table-column label="授信额度(单位:元)" align="center" prop="sfee" />
            <el-table-column label="申请时间" align="center" prop="createdTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createdTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="申请金额(单位:元)" align="center" prop="fee" />

            <el-table-column label="状态" align="center" prop="status" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row, 1)" v-hasPermi="['biz:edu:edit']">{{ scope.row.status == '待审核' ? '审核' : '查看' }}</el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row, 2)" v-hasPermi="['biz:edu:edit']">授信</el-button>
                    <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['biz:edu:remove']"
          >删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改申请额度记录对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body @close="cancel">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="申请金额" prop="fee">
                    <el-input v-model="form.fee" placeholder="请输入申请金额" :disabled="readonly" />
                </el-form-item>

                <el-form-item label="资质文件" prop="file">
                    <el-upload ref="file" :action="uploadImgUrl" :file-list="form.file" list-type="picture-card" :disabled="readonly" :class="{ hide: false }">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="授信额度" prop="sfee">
                    <el-input v-model="form.sfee" onkeyup="this.value=this.value.replace(/[^\d]/g,'');"  placeholder="请输入获得额度" :disabled="sfeeStatus" />
                </el-form-item>

                <el-form-item label="额度截止日期" prop="endTimes" label-width="150px;">
                    <el-date-picker size="small" style="width: 200px" v-model="form.endTimes" type="date" :picker-options="limitTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd " placeholder="选择截止时间" :disabled="endTimeStatus"> </el-date-picker>
                </el-form-item>

                <el-form-item label="备注" prop="msg">
                    <el-input v-model="form.msg" placeholder="请输入备注" :disabled="readonly" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm(1)" v-show="buttonStatus">通 过</el-button>
                <el-button @click="submitForm(2)" v-show="buttonStatus">不通过</el-button>
                <el-button @click="cancel" v-show="creditStatus">返回</el-button>
                <el-button type="primary" @click="submitForm(3)" v-show="creditStatus">确定授信</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listEdu, getEdu, delEdu, addEdu, updateEdu, exportEdu, getedutime } from '@/api/biz/edu';

export default {
    name: 'Edu',
    data() {
        return {
            creditStatus: false,
            buttonStatus: false,
            endTimeStatus: false,
            sfeeStatus: false,
            currentedu: '123',
            creditTime: [],
            edut: 'cds',
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 申请额度记录表格数据
            eduList: [],
            // 弹出层标题
            title: '',
            readonly: true,
            // 是否显示弹出层
            open: false,
            sreadonly: false,
            statusOptions: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                udi: undefined,
                fee: undefined,
                file: undefined,
                status: undefined,
                createdTime: undefined,
                companyName: undefined,
                endCreditTime: undefined,
                sfee: undefined,
                endSfee: undefined,
                msg: undefined
            },

            limitendtime: new Date(),

            typeoptions: [
                {
                    value: '0',
                    label: '待审核'
                },
                {
                    value: '1',
                    label: '审核通过'
                },
                {
                    value: '2',
                    label: '审核不通过'
                }
            ],

            // 表单参数
            form: {},
            uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
            // 表单校验
            rules: {
                sfee: [
                    {
                        required: true,
                        message: '授信额度不能为空',
                        trigger: 'blur'
                    }
                ],
                endTimes: [
                    {
                        required: true,
                        message: '截止日期不能为空',
                        trigger: 'blur'
                    }
                ]
            },

            limitTime: {},
            disableds: true
        };
    },
    created() {
        this.getList();
        this.getDicts('edu_status').then(response => {
            this.statusOptions = response.data;
        });
    },
    methods: {
        handleChangeTime() {
            this.queryParams.creditTime = this.creditTime[0];
            this.queryParams.endCreditTime = this.creditTime[1];
        },

        /** 查询申请额度记录列表 */
        getList() {
            this.loading = true;
            listEdu(this.queryParams, 1).then(response => {
                this.eduList = response.rows;

                this.eduList.forEach((item, index) => {
                    if (item.status == 0) {
                        this.eduList[index].status = '待审核';
                    } else if (item.status == 1) {
                        this.eduList[index].status = '审核通过';
                    } else if (item.status == 2) {
                        this.eduList[index].status = '审核不通过';
                    } else if (item.status == 3) {
                        this.eduList[index].status = '授信成功';
                    }

                    if (!item.sfee) {
                        this.eduList[index].sfee = '-';
                    }
                });

                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.$refs['file'].clearFiles();
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: undefined,
                udi: undefined,
                fee: undefined,
                file: undefined,
                status: '0',
                createdTime: undefined,
                sfee: undefined,
                msg: undefined
            };
            this.form.file = undefined;
            this.endTimeStatus = false;
            this.sfeeStatus = false;
            this.resetForm('form');
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm');
            this.queryParams.companyName = undefined;
            this.queryParams.endSfee = undefined;
            this.creditTime = undefined;
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = '添加申请额度记录';
        },
        /** 修改按钮操作 */
        handleUpdate(row, num) {
            console.log(row.status);

            if (row.status == '待审核' && num == 2) {
                return;
            }

            this.reset();
            this.form.file = undefined;
            const id = row.id || this.ids;
            getEdu(id).then(response => {
                this.form = response.data;
                console.log(this.form.status)
                console.log(num)
                if (this.form.status == 0 && num == 1) {
                    this.buttonStatus = true;
                } else {
                    this.buttonStatus = false;
                }
                if (this.form.status == 1 && num == 2) {
                    this.creditStatus = true;
                    this.endTimeStatus = false;
                    this.sfeeStatus = false;
                } else {
                    this.creditStatus = false;
                }

                if (num == 1 && this.form.status == 0) {
                    this.endTimeStatus = false;
                    this.sfeeStatus = false;
                }

                if (num == 1 && (this.form.status == 1 || this.form.status == 3 || this.form.status == 2)) {
                    this.endTimeStatus = true;
                    this.sfeeStatus = true;
                }

                if (num == 2) {
                    this.endTimeStatus = true;
                    this.sfeeStatus = true;
                }

                var images = this.form.file.split(',');
                var tmp = [];
                images.forEach(item => {
                    if (item != '') {
                        tmp.push({
                            name: '123',
                            url: process.env.VUE_APP_BASE_API + item
                        });
                    }
                });
                this.form.file = tmp;

                if (row.status != 0) {
                    this.sreadonly = true;
                }
                //获取额度截至时间
                getedutime(row.uid).then(response => {
                    var limitendtime = new Date();
                    if (response.code == 200 && response.msg) {
                        limitendtime = response.msg;
                    }
                    this.limitTime = {
                        disabledDate: time => {
                            return time.getTime() < new Date(limitendtime);
                        }
                    };
                });

                this.open = true;
                this.title = '审核';
            });
        },
        /** 提交按钮 */
        submitForm: function(status) {
            this.form.status = status;

            if (status == 1) {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        if (this.form.id != undefined) {
                            delete this.form.file;
                            updateEdu(this.form).then(response => {
                                if (response.code === 200) {
                                    this.msgSuccess('修改成功');
                                    this.open = false;
                                    this.getList();
                                } else {
                                    this.msgError(response.msg);
                                }
                            });
                        }
                    }
                });
            } else {
                if (this.form.id != undefined) {
                    delete this.form.file;
                    updateEdu(this.form).then(response => {
                        if (response.code === 200) {
                            this.msgSuccess('修改成功');
                            this.open = false;
                            this.getList();
                        } else {
                            this.msgError(response.msg);
                        }
                    });
                }
            }
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$confirm('是否确认删除申请额度记录编号为"' + ids + '"的数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(function() {
                    return delEdu(ids);
                })
                .then(() => {
                    this.getList();
                    this.msgSuccess('删除成功');
                })
                .catch(function() {});
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm('是否确认导出申请额度记录数据项?', '警告', {
                confirmButtonText: '确 定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(function() {
                    return exportEdu(queryParams);
                })
                .then(response => {
                    //this.download(response.msg);
                    this.msgSuccess(response.msg);
                })
                .catch(function() {});
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss">
    .edu  .el-form-item {
        margin-bottom: 22px !important;
    }
</style>
